<template>
	<button v-if="!hasUserInfo" @click="onClickAuth" class='auth-button' :style="buttonStyle">
		<cover-view v-if="cover" class='auth-button-inner'></cover-view>
	</button>
</template>

<script>
	import Store from '@/store/index.js'
	import {syncUserInfo} from '@/services/miniApi.js'
	import {mapGetters} from 'vuex'
	export default {
		name: 'authButton',
		props: {
			cover: {
				type: Boolean,
				default: false
			},
			width: {
				type: String,
				default: ''
			},
			height: {
				type: String,
				default: ''
			}
		},
		computed: {
			...mapGetters(['hasUserInfo']),
			buttonStyle(){
				let styles = []
				if(this.width != ''){
					styles.push(`width: ${this.width}`)
				}
				if(this.height != ''){
					styles.push(`height: ${this.height}`)
				}
				return styles.join(';')
			}
		},
		methods: {
			async doSyncUser(){
				if(this.hasUserInfo){
					this.$emit('userinfo')
					return
				}
				await syncUserInfo()
				
				this.$emit('userinfo')
			},
			onClickAuth(){
				this.doSyncUser().catch((err)=>{
					console.log(err)
				})
			}
		}
	}
</script>

<style>
	.auth-button {
		position: relative;
		width: 100%;
		height: 100%;
		opacity: 0;
	}
	.auth-button .auth-button-inner {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}
</style>